<template>
	<view class="content">
		<image referrerpolicy="no-referrer" src="/static/index/login.png" mode="widthFix" />
		<view class="login-panel">
			<view class="login-text">登录</view>
			<u-form labelPosition="left" :model="model" ref="form1" :rules="rules" errorType="toast">
				<u-form-item prop="userInfo.mobile" ref="item1">
					<u-icon name="account" size="2rem"></u-icon>
					<u-input v-model="model.userInfo.mobile" confirmType="next" :confirmHold="true"
						@confim="pwdFocus=true" placeholder="请输入手机号/邮箱" border="none" fontSize="1.2rem">
					</u-input>
				</u-form-item>
				<u-form-item prop="userInfo.password" ref="item1">
					<u-icon name="lock" size="2rem"></u-icon>
					<u-input type="password" v-model="model.userInfo.password" :focus="pwdFocus"
						@confim="pwdFocus=false" placeholder="请输入登录密码" border="none" fontSize="1.2rem">
					</u-input>
				</u-form-item>
			</u-form>
			<u-button text="确认登录" @click="submit" type="error" shape="circle" color="#fff"
				:custom-style="{background:'#fb3a2b !important',height:'3.5rem'}"></u-button>
		</view>
	</view>
</template>

<script>
import {login} from "@/api/system/auth.js";

export default {
		data() {
			return {
				model: {
					userInfo: {
						mobile: '',
						password: '',
					},
				},
				pwdFocus: false,
				rules:{
					'userInfo.mobile':[{
						type:'string',
						required:true,
						message:'请输入手机号',
						trigger: ['blur', 'change']
					},{
						pattern:/^1[3|4|5|6|7|8|9][0-9]{9}$/,
						message:'手机号格式不正确'
					}],
					'userInfo.password':[{
						type:'string',
						required:true,
						message:'请输入密码',
						trigger: ['blur', 'change']
					},{
						pattern:/^([a-zA-Z0-9_]){6,18}$/,
						message:'密码长度在6~18之间，只能包含字母、数字和下划线'
					}]
				}
			}
		},
		onLoad() {
			if (this.$util.getAuthToken()) {
				uni.switchTab({
					url: '/pages/index/index'
				});
			}
		},
		methods: {
			submit() {
				this.$refs.form1.validate().then(res=>{
					login(this.model.userInfo.mobile,
						this.model.userInfo.password
					).then(res => {
						if (res.accessToken) {
							const accessToken = res.accessToken;
							const refreshToken = res.refreshToken;
							this.$store.commit('setStateAttr', {
								key: 'userId',
								val: res.userId + ''
							});
							this.$store.commit('setStateAttr', {
								key: 'refreshToken',
								val: res.refreshToken + ''
							});
							uni.setStorageSync('refreshToken', refreshToken + '')
							uni.setStorageSync('userId', res.userId + '')
							this.$store.commit('setAccessToken', {
								accessToken
							});
							this.$store.dispatch('loadDictDatas');
							this.$util.msg('登陆成功');
							setTimeout(() => {
								this.model.userInfo = {
									mobile: '',
									password: '',
								};
							}, 2000)
							uni.switchTab({
								url: '/pages/index/index'
							});
						}
					})
				}).catch(err=>{})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		image {
			width: 100%;
		}

		.login-panel {
			padding: 3rem;

			.login-text {
				text-align: center;
				font-size: 1.8rem;
				color: #000;
				margin-bottom: 2.8rem;
			}

			/deep/ .u-form {
				.u-form-item {
					margin-bottom: 1.2rem;
					border: .1rem solid rgb(214, 215, 217);
					border-radius: 2.2rem;

					.u-form-item__body__right__content__slot {
						display: flex;
						flex-direction: row;
						align-items: center;
					}

					.u-icon {
						margin-right: .5rem;
						margin-left: 2.2rem;
					}
				}
			}

			/deep/ .u-button {
				margin-top: 3.2rem;
			}
		}
	}
</style>
